<template>
  <el-pagination
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :total="total"
    :layout="layout"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

// 当前页码，使用ref创建响应式数据，初始值为1
const currentPage = ref(1);
// 每页显示数量，初始值设为10
const pageSize = ref(10);
// 数据总数，通过props接收父组件传入的值
const { total } = defineProps({
  total: {
    type: Number,
    required: true,
  },
});

const layout = "total, sizes, prev, pager, next, jumper";

// 当页码改变时触发的函数
const handleCurrentChange = async (newPage) => {
  console.log("newPage", newPage);

  currentPage.value = newPage;
  try {
    // 触发父组件传入的获取数据函数，并传递当前页码和每页数量，等待数据获取完成
    await emits("current-change", newPage, pageSize.value);
  } catch (error) {
    // 如果获取数据出现错误，显示错误提示信息
    ElMessage.error(`获取数据失败，请稍后再试${error}`);
  }
};

// 当每页显示数量改变时触发的函数
const handleSizeChange = async (newSize) => {
  pageSize.value = newSize;
  try {
    // 触发父组件传入的获取数据函数，并传递当前页码和新的每页数量，等待数据获取完成
    await emits("size-change", currentPage.value, newSize);
  } catch (error) {
    // 如果出现错误，显示相应的错误提示信息
    ElMessage.error("获取数据失败，请稍后再试");
  }
};

// 定义组件向外发射的事件
const emits = defineEmits(["current-change", "size-change"]);
</script>

<style scoped></style>
